

<!-- 我的优惠券 -->
<template>
	<view>
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="优惠券" rightBtnType="msgCenter" colorTheme="black" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>


		<!-- 顶部taber组件 -->
		<view class="navbar headerNext">
			<haverster-slidingMenu :list="list" :color="color" @changes="getIndex"></haverster-slidingMenu>
		</view>

		<!-- 未使用 -->
		<view v-if="activeIndex == 0">
			<view v-if="notUse && notUse.length">
				<view class="coupon" v-for="(item,index) of notUse" :key="item.id">
					<image class="bg" :src="item.zkType == '1'?icon.youhui_zk: icon.youhuiquan"></image>
					<view class="detail">
						<view class="left">
							<view class="price" v-if="item.couponType === '10'">
								<text>￥</text>
								<text>{{item.faceValue}}</text>
							</view>
							<view class="price" v-if="item.couponType === '20'">
								<text style="font-size: 54rpx;">{{item.faceValue}}</text>
								<text style="font-size: 28rpx;">折</text>
							</view>
							<view class="msg ellipsis2" v-if="item.enoughMoney != '0'">满{{item.enoughMoney}}可用</view>
							<view class="msg ellipsis2" v-if="item.enoughMoney == '0'">无门槛优惠券</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name ellipsis2">
									<text class="quan" v-if="item.couponType === '10'">满减券</text>
									<text class="quan" v-if="item.couponType === '20'">折扣券</text>
									<text class="text">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<view class="canUse">{{item.beginTime}}-{{item.endTime}}</view>
									<!-- <view class="use" @click="toUse"><view>立即使用</view></view> -->
								</view>
							</view>
							<view class="bottom" @click="selectZk(index)">
								<view>使用说明</view>
								<view>
									<image v-if="item.zkType == '0'" :src="icon.down"></image>
									<image v-if="item.zkType == '1'" :src="icon.up"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="discount-detail" v-if="item.zkType == '1'">
						<view>{{item.ruleDes}}</view>
					</view>
				</view>
			</view>
			<g-empty v-else></g-empty>
		</view>

		<!-- 已使用 -->
		<view v-if="activeIndex == 1">
			<view v-if="beUsed && beUsed.length">
				<view class="coupon" v-for="item of beUsed" :key="item.id">
					<image class="bg" :src="icon.yishiyong"></image>
					<view class="detail">
						<view class="left">
							<view class="price" v-if="item.couponType === '10'">
								<text style="color: #ADADAD;">￥</text>
								<text style="color: #ADADAD;">{{item.faceValue}}</text>
							</view>
							<view class="price" v-if="item.couponType === '20'">
								<text style="font-size: 54rpx;color: #ADADAD;">{{item.faceValue}}</text>
								<text style="font-size: 28rpx;color: #ADADAD;">折</text>
							</view>
							<view class="msg ellipsis2" style="color:#ADADAD" v-if="item.enoughMoney != '0'">满{{item.enoughMoney}}可用</view>
							<view class="msg ellipsis2" style="color:#ADADAD" v-if="item.enoughMoney == '0'">无门槛优惠券</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name ellipsis2">
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '10'">满减券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '20'">折扣券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '30'">免单券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '40'">免运费券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '50'">满减运费券</text>
									<text class="text">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<view class="canUse">{{item.beginTime}}-{{item.endTime}}</view>
								</view>
							</view>
							<view class="bottom"></view>
						</view>
					</view>
				</view>
			</view>
			<g-empty v-else></g-empty>
		</view>

		<!-- 已过期 -->
		<view v-if="activeIndex == 2">
			<view v-if="beOverdue && beOverdue.length">
				<view class="coupon" v-for="item of beOverdue" :key="item.id">
					<image class="bg" :src="icon.yiguoqi"></image>
					<view class="detail">
						<view class="left">
							<view class="price" v-if="item.couponType === '10'">
								<text style="color: #ADADAD;">￥</text>
								<text style="color: #ADADAD;">{{ item.faceValue}}</text>
							</view>
							<view class="price" v-if="item.couponType === '20'">
								<text style="font-size: 54rpx;color: #ADADAD;">{{item.faceValue}}</text>
								<text style="font-size: 28rpx;color: #ADADAD;">折</text>
							</view>
							<view class="msg ellipsis2" style="color:#ADADAD" v-if="item.enoughMoney != '0'">满{{item.enoughMoney}}可用</view>
							<view class="msg ellipsis2" style="color:#ADADAD" v-if="item.enoughMoney == '0'">无门槛优惠券</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name ellipsis2">
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '10'">满减券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '20'">折扣券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '30'">免单券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '40'">免运费券</text>
									<text class="quan" style="border-color: #CCCCCC;color: #999999;" v-if="item.couponType === '50'">满减运费券</text>
									<text class="text">{{ item.couponName }}</text>
								</view>
								<view class="time">
								<view class="canUse">{{item.beginTime}}-{{item.endTime}}</view>
								</view>
							</view>
							<view class="bottom"></view>
						</view>
					</view>
				</view>
			</view>
			<g-empty v-else></g-empty>
		</view>

		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';

import navHeader from '@/components/nav-header/nav-header';
import detailMenu from "@/components/detailMenu/detailMenu";
import haversterSlidingMenu from '@/components/haverster-slidingMenu/haversterSlidingMenu';

export default {
	components: {
		navHeader,
		detailMenu,
		haversterSlidingMenu
	},
	data() {
		return {
			icon: {
				return: '/static/images/order/return.png',
				msgCenter: '/static/images/common/msg-center.png',
				youhuiquan: '/static/images/coupon/youhuiquan.png',
				youhui_zk: '/static/images/coupon/youhui_zk.png',
				down: '/static/images/coupon/down.png',
				up: '/static/images/coupon/up.png',
				yishiyong: '/static/images/coupon/youhuiquan-yishiyong.png',
				yiguoqi: '/static/images/coupon/yiguoqi.png'
			},
			list: ['未使用', '已使用', '已过期'], //默认传到顶部菜单栏的数据
			activeIndex: 0, ///菜单栏选中状态的index值
			color: '#ffffff', //设置菜单的背景颜色
			notUse: [],
			beUsed: [],
			beOverdue: [],


			//详情菜单
			showDetailMenu: false,
		};
	},
	onLoad(option) {
		this.getData();
	},
	methods: {

		//详情菜单
		toggleMenuListHandler() {
			this.showDetailMenu = !this.showDetailMenu;
		},


		// 滑块点击
		getIndex(e) {
			this.activeIndex = e;
			this.getData();
		},
		getData() {
			let that = this;
			let receiveStatus = 0;
			if(this.activeIndex == 0)receiveStatus = 10;
			if(this.activeIndex == 1)receiveStatus = 20;
			if(this.activeIndex == 2)receiveStatus = 30;
			this.$api.globalUtil.requestAjax({
				url: '/coupon/getCustomerCoupon',
				method: 'POST',
				data: {
					receiveStatus:receiveStatus
				},
				success: function(res) {

					if(that.activeIndex == 0)that.list= ['未使用('+res.data.response.length+')', '已使用', '已过期'];
					if(that.activeIndex == 1)that.list= ['未使用', '已使用('+res.data.response.length+')', '已过期'];
					if(that.activeIndex == 2)that.list= ['未使用', '已使用', '已过期('+res.data.response.length+')'];
					if(res.data.response.length>0){
						if(that.activeIndex == 0){
							for(let i of res.data.response){
								i.zkType = '0';
								i.beginTime = i.beginTime.split(' ')[0];
								i.endTime = i.endTime.split(' ')[0];
							}
							that.notUse = res.data.response;
						}
						if(that.activeIndex == 1){
							for(let i of res.data.response){
								i.beginTime = i.beginTime.split(' ')[0];
								i.endTime = i.endTime.split(' ')[0];
							}
							that.beUsed = res.data.response;
						}
						if(that.activeIndex == 2){
							for(let i of res.data.response){
								i.beginTime = i.beginTime.split(' ')[0];
								i.endTime = i.endTime.split(' ')[0];
							}
							that.beOverdue = res.data.response;
						}
						console.log(that.notUse)
					}else{
						that.notUse = [];
						that.beOverdue = [];
						that.beUsed = [];
					}
				}
			});
		},
		back() {
			uni.navigateBack({
				detail: '1'
			});
		},
		selectZk(index){
			this.notUse[index].zkType == '0'? this.notUse[index].zkType = '1':this.notUse[index].zkType = '0';
		},
		toUse(){
			uni.switchTab({
				url: '/pages/category/category'
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background: white;
}
// 单个优惠券
.coupon {
	margin-left: 25rpx;
	position: relative;
	width: 701rpx;
	z-index: 2;
	margin-top: 18rpx;
	.bg {
		height: 201rpx;
		width: 701rpx;
		position: absolute;
		z-index: 1;
		top: 0;
	}
	.detail {
		position: relative;
		z-index: 2;
		height: 201rpx;
		width: 701rpx;
		display: flex;
		.left {
			text-align: center;
			padding-top: 50rpx;
			margin-left: 6rpx;
			width: 199rpx;
			height: 190rpx;
			.price text:first-child {
				color: #FE5E49;
				font-size: 30rpx;
				font-weight: bold;
			}
			.price text:last-child {
				color: #FE5E49;
				font-size: 54rpx;
				font-weight: bold;
			}
			.msg {
				font-size: 20rpx;
				color: #FE5E49;
				margin-top: -6rpx;
			}
		}
		.right {
			width: 488rpx;
			height: 190rpx;
			padding-top: 12rpx;
			.top {
				padding: 0 0 16rpx 30rpx;
				line-height: 40rpx;
				border-bottom: 1rpx solid #dbdbdb;
				border-bottom-style: dotted;
				.name {
					height: 88rpx;
					position: relative;
				}
				.text {
					font-size: 22rpx;
					font-weight: bold;
					color: #333333;
					padding-left:108rpx;
				}
				.quan {
					position: absolute;
					top: 10rpx;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 90rpx;
					height: 28rpx;
					white-space: nowrap;
					font-size: 18rpx;
					color: #FE5E49;
					border-radius: 14rpx;
					border: 1px solid #FE5E49;

				}
				.time {
					height: 36rpx;
					width: 100%;
					display: flex;
					align-items: center;
					.canUse {
						color: #666666;
						width: 70%;
						font-size: 20rpx;
					}
					.use {
						width: 30%;
						text-align: right;
						view {
							color: #fff;
							width: 120rpx;
							border-radius: 18rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 18rpx;
							/* background-image: linear-gradient(to right, #d21728, #d102a8); */
							background: #FE5E49;
						}
					}
				}
			}
			.bottom {
				display: flex;
				align-items: center;
				height: 40rpx;
				image {
					width: 12rpx;
					height: 8rpx;
				}
				view:first-child {
					color: #666666;
					font-size: 18rpx;
					padding-left: 26rpx;
					width: 50%;
				}
				view:last-child {
					padding-right: 26rpx;
					width: 50%;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
				}
			}
		}
	}
}
// 优惠券使用说明
.discount-detail {
	width: 698rpx;
	border: 1rpx solid #ffe5e7;
	border-top: 0;
	margin-left: 2rpx;
	border-radius: 0 0 20rpx 20rpx;
	color: #666;
	font-size: 18rpx;
	padding: 10rpx 20rpx;
}


/* header部分 */
.header-Container {
	z-index: 999;
	position: sticky;
	top: 0;
	width: 100%;
	height: 176rpx;
	overflow: hidden;
	box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 1);

	.leftBtns {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;

		.back {
			margin-left: 17rpx;
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}


.navbar {
	z-index: 999;
	position: sticky !important;
	border-top: 1rpx solid #eee;
}
</style>
